<template>
  <div v-if="visible" class="right-click-menu Z" :style="{ top: menuTop + 'px', left: menuLeft + 'px' }">
    <el-menu>
      <el-menu-item
          v-for="item in menuItems"
          :key="item.key"
          :index="item.key"
          @click="handleMenuItemClick(item.event)"
      >
        {{ item.label }}
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {MenuItem} from "@/views/components/Ztree/type.ts";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  menuTop: {
    type: Number,
    default: () => {
      return 0
    }
  },
  menuLeft: {
    type: Number,
    default: () => {
      return 0
    }
  },
  menuItems: {
    type: Array<MenuItem>,
    default: () => {
      return [
        {key: 'add', label: '添加', event: 'add'},
        {key: 'edit', label: '编辑', event: 'edit'},
      ]
    }
  }
})

const emit = defineEmits(['click'])

const handleMenuItemClick = (eventName: string) => {
  emit('click', eventName); // 由于 eventName 已经是定义过的事件类型之一，这里不需要额外的检查
};
</script>

<style scoped>
.right-click-menu {
  position: absolute;
  background-color: white;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 确保菜单显示在其他内容之上 */

  ::v-deep(.el-menu-item) {
    border-radius: 5px;
    height: 38px;
  }

}
</style>
